import React, { Fragment } from "react";
// css
import "./index.scss";
// 组件
import LoginForm from "./LoginForm";
import RetisterForm from "./RegisterForm";
export default class index extends React.Component{
   state={formType:true,haha:true}
//    登录注册添加属性切换减少频闪
    switchForm =() => {
        this.setState({formType:!this.state.formType}, ()=> {
            setTimeout(()=>{this.setState({haha:!this.state.haha})},1000)
        })
    }
    
    render(){
        const {formType,haha} = this.state
        return (
            <Fragment>
            <div className={`container ${formType?'':'sign-up-mode'}`}>
                <div className="sforms-container">
                    <div className="signin-signup">
                    {haha?<LoginForm/>:<RetisterForm switchForm={this.switchForm}/>}
                    </div>
                </div>
            {/*  左右切换动画 */}
            {/* 左边登录栏*/}
            <div className="panels-container">
            <div className="panel left-panel">
                <div className="content">
                <h3>学习是为了有更多的选择,让生活变的更美好!</h3>
                <p>好好学习，天天向上</p>
                <button className="btn transparent" onClick={this.switchForm}>
                    注册
                </button>
                </div>
                {/* 因为require是动态加载，加default，import是静态编译。推荐使用import来引入图片： */}
                <img  src={require('../../assets/img/log.svg').default}  className="image" alt="" />
            </div>
            {/* 右边注册栏 */}
            <div className="panel right-panel">
                <div className="content">
                <h3>以人为镜,可明得失, 以代码为镜,可通逻辑!</h3>
                <p>学习编程,让你的生活更有趣</p>
                <button className="btn transparent" onClick={this.switchForm}>
                    登录
                </button>
                </div>
                {/* 因为require是动态加载，加default，import是静态编译。推荐使用import来引入图片： */}
                <img src={require('../../assets/img/register.svg').default} className="image" alt="" />
            </div>
            </div>
        </div>
        </Fragment>
            
            
        )
    }
}

